<template>
  <div :id="id" :class="className" style="width: 100%; height: 258px" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import { title } from '@/settings'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    id: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '200px',
    },
    height: {
      type: String,
      default: '300px',
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    list: {
      handler(newValue, oldValue) {
        this.initChart()
      },
      deep: true,
    },
  },
  // mounted() {
  //   if (this.list.length > 0) {
  //     this.initChart()
  //   } else {
  //     console.log(55)
  //   }
  // },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const xData = [],
        yData = []
      for (let i = 1; i < this.list.length; i++) {
        // xData.push(dayjs(this.list[i].start_time).format('MM-DD HH:mm:ss'))
        xData.push(this.list[i].小时)
        yData.push(this.list[i].断头数)
      }
      // const xData = (function () {
      //   const data = []
      //   for (let i = 1; i < this.list.length; i++) {
      //     data.push(this.list[i].start_time1)
      //   }
      //   return data
      // })()
      // const yData = (function () {
      //   const data = []
      //   for (let i = 1; i < this.list.length; i++) {
      //     data.push(this.list[i].broken)
      //   }
      //   return data
      // })()
      // console.log(xData, yData)
      this.chart.setOption({
        title: {
          text: '断头',
          left: 'center',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            type: 'line',
            areaStyle: {},
          },
        ],
      })
    },
  },
}
</script>
